<template>
  <div class="app-container" style="height: 100vh">
    <div class="display-container" style="height: 100%;width: 100%;display: flex;flex-direction: column;">
      <div style="display: flex;height: 40%;align-items: center;justify-content: space-between;">
        <div class="card1">
          <div>
            <!-- 产品统计 -->
            <el-select v-model="productvalue" filterable style="width: 120px;" @change="handleProduct">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
              </el-option>
            </el-select>
            
          </div>
          <div id="type_pieChart" style="width: 100%;height: 100%;">

          </div>
        </div>

        <div class="card2">
          <div>
            <!-- 一周内出海捕捞次数 -->
            <span style="width: 120px;" >一周内</span>
          

          </div>
          <div id="frequency_lineChart" style="width: 100%;height: 100%;">

          </div>
        </div>
      </div>
      <div class="card3">
        
          
          <el-select v-model="locationvalue" filterable style="width: 120px;margin-top: 20px;" @change="handleLocation">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          
        
        <div id="location_scatterPlot" style="width: 100%;height: 80%;">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import * as echarts from 'echarts';
import { Divider } from 'element-ui';
import { getFrequency,getLocation,getProduct } from '@/api/manager';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      // 产品数据
      product: null,
      // 地点数据
      location:null,
      // 频次数据
      frquency:null,
      options: [{
        value: 0,
        label: '一天内'
      }, {
        value: 1,
        label: '三天内'
      }, {
        value: 2,
        label: '一周内'
      }, {
        value: 3,
        label: '一个月内'
      }, {
        value: 4,
        label: '半年内'
      }],
      
      productvalue:0,
      locationvalue:0,
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {
    this.loadTypePieChart();
    this.loadFrequencyLineChart();
    this.loadLocationScatter();
  },
  methods: {
    // 处理产品数量
    handleProduct(value){
      this.productvalue=value
      console.log("productVaule=",this.productvalue)

      let chartDom = document.getElementById('type_pieChart');
      let myChart = echarts.init(chartDom);

      let option;

      getProduct({
        scope:this.productvalue
      }).then(response=>{
        this.product=response.data
        console.log("product=",this.product)
        

        option = {
        title: {
          text: '捕捞产品统计',
          subtext: '展示捕捞产品的种类及占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        grid: {
          left: 20, 
          right: 20, 
          bottom: 20, 
          containLabel: true
       },
      
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.product.fish_total, name: '鱼类' },
              { value: this.product.sac_total, name: '虾蟹类' },
              { value: this.product.shell_total, name: '壳类' },
              { value: this.product.alga_total, name: '藻类' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
      });
    },

    // 处理捕捞地点
    handleLocation(value){
      this.locationvalue=value
      console.log("LocationVaule=",this.locationvalue)
      getLocation({
        scope:this.locationvalue
        }).then(response=>{
        this.location=response.data
        console.log("location=",this.location)
        
        const x = this.location.map(item => item.locationX);
        const y = this.location.map(item => item.locationY);
        console

        var chartDom = document.getElementById('location_scatterPlot');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '捕捞地点分布',
            subtext: '可以观察到受渔民欢迎的捕捞区域',
            left: 'center'
          },
          xAxis: {
            name: '东经',
            data:x
          },
          yAxis: {
            name: '北纬'
          },
          series: [
            {
              symbolSize: 10,
              data: y,
              type: 'scatter'
            }
          ]
        };
        option && myChart.setOption(option);
      });

    },

    fetchData() {
      
    },

    // 初始化图表，默认一天内
    loadTypePieChart() {
      
      let chartDom = document.getElementById('type_pieChart');
      let myChart = echarts.init(chartDom);

      let option;

      getProduct({
        scope:0
      }).then(response=>{
        this.product=response.data
        console.log("product=",this.product)
        

        option = {
        title: {
          text: '捕捞产品统计',
          subtext: '展示捕捞产品的种类及占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        grid: {
          left: 20, 
          right: 20, 
          bottom: 20, 
          containLabel: true
       },
      
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.product.fish_total, name: '鱼类' },
              { value: this.product.sac_total, name: '虾蟹类' },
              { value: this.product.shell_total, name: '壳类' },
              { value: this.product.alga_total, name: '藻类' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
      });
    },
    loadFrequencyLineChart() {
      let chartDom = document.getElementById('frequency_lineChart');
      let myChart = echarts.init(chartDom);
      let option;

      getFrequency().then(response=>{
        this.frquency=response.data
        console.log("frquency=",this.frquency) 
        console.log(this.frquency.length)

        const days = this.frquency.map(item => item.day);
        const counts = this.frquency.map(item => item.count);

        option = {
        title: {
          text: '出海捕捞次数统计',
          subtext: '可以观察到捕捞次数的变化趋势',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: days
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: counts,
            type: 'line'
          }
        ]
      };
      option && myChart.setOption(option);

      })
    },
    loadLocationScatter() {
      getLocation({
        scope:0
        }).then(response=>{
        this.location=response.data
        console.log("location=",this.location)
        
        const x = this.location.map(item => item.locationX);
        const y = this.location.map(item => item.locationY);
        console

        var chartDom = document.getElementById('location_scatterPlot');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '捕捞地点分布',
            subtext: '可以观察到受渔民欢迎的捕捞区域',
            left: 'center'
          },
          xAxis: {
            name: '东经',
            data:x
          },
          yAxis: {
            name: '北纬'
          },
          series: [
            {
              symbolSize: 10,
              data: y,
              type: 'scatter'
            }
          ]
        };
        option && myChart.setOption(option);
      });
    }
  },
  components: { Divider }
}
</script>

<style>
.card1 {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  transition: .3s;
  border-radius: 4px;
  overflow: hidden;
  width: 48%;
  height: 100%;
  padding: 10px 0 0px 20px;
}

.card2 {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  transition: .3s;
  border-radius: 4px;
  overflow: hidden;
  width: 48%;
  height: 100%;
  padding: 10px 0 0px 15px;
}

.card3 {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  transition: .3s;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  height: 80%;
  padding: 10px 0 0px 20px;
  margin-top: 20px;
}
</style>
